<template>
	<view class="content">
		<top-bar>
			<template #left>
				<image src="../../static/images/login/back.png" style="width: 44rpx;height: 44rpx;" @tap="back"></image>
			</template>
			<template #center>
				<input type="text" :focus="iptfocus" class="input-search" placeholder="搜索用户/群" maxlength="26"
					placeholder-style="color:#aaa" v-model="partKey">
			</template>
			<template #right>
				<!-- @keydown.enter 键盘按下回车触发,或者当用户按下键盘就会触发 -->
				<view class="search-btn-view" @tap="searchUser()">
					<image src="../../static/images/index/search.png" style="width: 64rpx;height: 64rpx;" s mode="">
					</image>
				</view>
			</template>
		</top-bar>
		<view class="main">
			<view class="listTitle" v-show="resultList.length>0">
				用户
			</view>
			<view class="friend">
				<scroll-view scroll-y="false" style="height:100%;">
					<view class="friend-list" v-for="item in resultList" :key="item.id">
						<view class="friend-list-l">
							<!-- 用户头像 -->
							<image :src="item.imgurl"></image>
						</view>
						<view class="friend-list-r">
							<view class="top">
								<view class="name" v-html="item.name"></view>
								<view class="email" v-html="item.email"></view>
								<view class="add" v-show="item.state" @tap="tochat(item._id)">去聊天</view>
								<view class="add" style="backgroundColor:#FFE431;color: black"
									v-show="!item.state&&userid!=item._id" @tap="toadd(item._id)">加好友</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!--群聊 -->
			<view class="listTitle" v-show="resultCoward.length>0">
				群聊
			</view>
			<view class="friend-list" v-for="item in resultCoward" :key="item.id">
				<!-- 好友请求列表 -->
				<view class="friend-list-l">
					<!-- 用户头像 -->
					<image src="../../static/images/index/apply.png" mode=""></image>
				</view>
				<view class="friend-list-r">
					<view class="top">
						<view class="name">夕阳无限好，只是近黄昏，你懂吗</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../commons/js/util.js'
	import {
		RuntimeServerUrl
	} from "../../commons/getRuntimeEnv.js"
	import TopBar from "../../components/top-bar/top-bar.vue"
	import {
		getdata,
		isFriend
	} from "../../api/search/search.js"
	export default {
		data() {
			return {
				userid: '',
				partKey: '',
				userList: [],
				resultList: '',
				resultCoward: '',
				iptfocus: false
			}
		},
		components: {
			TopBar
		},
		onLoad() {
			this.userid = uni.getStorageSync('userid')
		},
		onReady() {
			this.iptfocus = true;
		},
		watch: {
			partKey(value) {
				if (value.length == 0)
					this.resultList = []
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//通过接口获得数据
			async searchUser() {
				if (!this.partKey)
					this.resultList = []
				// //console.log(this.partKey=='');
				if (this.partKey) {
					this.userList = await getdata(this.partKey)
					// //console.log(this.userList,'this.userList');
					let reg = eval('/' + this.partKey + '/g');
					this.resultList = this.userList.map(item => {
						// if(item.name.search(reg)!=-1)
						// //console.log(item.name.search(/test/));
						if (item.name.search(reg) != -1 || item.email.search(reg) != -1) {
							this.$set(item, "state", 1)
							item.imgurl = RuntimeServerUrl + item.imgrul
							item.name = item.name.replace(reg, "<span style='color:#4aaaff'>" + this
								.partKey +
								"</span>")
							item.email = item.email.replace(reg, "<span style='color:#4aaaff'>" + this
								.partKey + "</span>")
							//获取用户状态 1好友 0 不是好友 3 
							util.request({
								url: '/search/isfriend',
								method: "POST",
								data: {
									uid: this.userid,
									fid: item._id,
								}
							}).then(res => {
								if (res.data.status == 200) {
									item.state = 1
								} else {
									item.state = 0
								}
							})

							//console.log(item.state,'item.state');
							return item
						}
					});
					//console.log(this.resultList);
				}
				// //console.log(this.resultList,'结果');
			},


			//是好友返回true 不是返回false
			hasRalation(fid) {
				return new Promise((reslove, reject) => {
					util.request({
						url: '/search/isfriend',
						method: "POST",
						data: {
							uid: this.userid,
							fid,
						}
					}).then(res => {
						//console.log(res.data.status,'shihaoyou');
						if (res.data.status == 200) {
							reslove(true)
						} else {
							reslove(false)
						}
					}).catch(err => {
						reject(err)
					})
				})
			},
			tochat(id) {
				uni.navigateTo({
					url: `/pages/cheat/cheat?id=${id}`
				})
			},
			toadd(id) {
				uni.navigateTo({
					url: `/pages/userGarllery/userGarllery?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: calc(100vh - var(--status-bar-height));
		margin-top: var(--status-bar-height);
	}

	.input-search {
		width: 530rpx;
		height: 60rpx;
		padding: 0 6rpx;
		font-size: 36rpx;
		line-height: 60rpx;
		border-bottom: 2rpx solid #d1cfcf;
	}

	.search-btn-view {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 88rpx);
		margin-top: 68rpx;
		padding-top: 20rpx;
		position: absolute;
		top: var(--status-bar-height);

		.listTitle {
			// width: 43px;
			// padding: 20rpx;
			// border:1px solid red;
			font-family: PingFangSC-Semibold;
			font-size: 44rpx;
			margin-left: 25rpx;
			padding: 5rpx;
			color: #272832;
			letter-spacing: -0.75px;
			font-weight: 550;
		}

		.friend {
			height: calc(100% - var(--status-bar-height) - 88rpx);
		}

		.friend-list {
			display: flex;
			/* 水平垂直居中 */
			justify-content: center;
			align-items: center;
			/* border: 1px solid red; */
			/* margin: 20rpx 0 20rpx 0; */
			height: 128rpx;

			.friend-list-l {
				position: relative;

				/* width: 21%; */
				image {
					height: $uni-img-size-base;
					width: $uni-img-size-base;
					margin-top: 8rpx;
					border-radius: $uni-border-radius-base;
					background-color: $uni-color-primary;
				}

			}

			.friend-list-r {
				width: 79%;
				position: relative;

				.top {
					margin-left: 30rpx;

					// border: 1px solid red;
					.name {
						max-width: 80%;
						height: 50rpx;
						font-family: PingFangSC-Regular;
						font-size: 40rpx;
						color: #272832;
						letter-spacing: -0.62px;
						line-height: 50rpx;
						font-weight: 450;

						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.email {
						max-width: 80%;
						height: 50rpx;
					}

					// 家好用样式 保留
					.add {
						position: absolute;
						right: 0rpx;
						bottom: 25%;
						min-width: 100rpx;
						width: 120rpx;
						height: 50rpx;
						background: rgba(74, 170, 255, 0.10);
						border-radius: 24rpx;
						text-align: center;
						color: #4AAAFF;
						font-size: 30rpx;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>